<!-- 首页 -->
<template>
    <div class="home">
      <TopNav></TopNav>
      <div>
        <div class="container">
          <!--logo+搜索-->
          <div class="logo_search plate">
            <div class="titlelogo">
              <img src="../../assets/homePage/titlelogo.png" alt="">
            </div>
            <div class="search">
              <el-select v-model="value1" multiple placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
  
              <el-select
                v-model="value2"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
  
              <el-select
                v-model="value3"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
  
              <div class="fastSearch">
                <a href=""><span>快速找产品</span></a>
              </div>
            </div>
          </div>
  
          <!--横幅图片-->
          <div class="banner plate">
            <img src="../../assets/homePage/banner.png" alt="">
          </div>
  
          <!--产品列表-->
          <div class="productList plate">
            <div class="product_word">
              <span>PRODUCT</span>
            </div>


            <div class="insuranseList">

              <div class="insuranse" v-for="item in goodslist" :key="item">
                <div class="insuranse_img">
                  <img src="../../assets/homePage/insurance3.jpg" alt="">
                </div>
                <div class="insuranse_info">
                  <div class="info1">
                    <h2>{{item.name}}</h2>
                  </div>
                  <div class="info2">
                    <span>{{item.describ}}</span>
                    <span>时间：{{ item.insurTime }}</span>
                  </div>
                  <div class="info3">
                    <div class="starFare">
                      <span class="symbol">￥</span>
                      <span>{{price}}</span>
                      <span class="qi">起</span>
                    </div>
                    <div class="details">
                      <a @click="chankxq(item)"><span>了解详情</span></a>
                    </div>
                  </div>
                </div>
              </div>

              <!-- <div class="insuranse">
                <div class="insuranse_img">
                  <img src="../../assets/homePage/insurance4.jpg" alt="">
                </div>
                <div class="insuranse_info">
                  <div class="info1">
                    <h2>家庭财产险</h2>
                  </div>
                  <div class="info2">
                    <span>室内家财，房屋主题</span>
                    <span>小投入，更安心</span>
                  </div>
                  <div class="info3">
                    <div class="starFare">
                      <span class="symbol">￥</span>
                      <span>{{price}}</span>
                      <span class="qi">起</span>
                    </div>
                    <div class="details">
                      <a href=""><span>了解详情</span></a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="insuranse">
                <div class="insuranse_img">
                  <img src="../../assets/homePage/insurance4.jpg" alt="">
                </div>
                <div class="insuranse_info">
                  <div class="info1">
                    <h2>家庭财产险</h2>
                  </div>
                  <div class="info2">
                    <span>室内家财，房屋主题</span>
                    <span>小投入，更安心</span>
                  </div>
                  <div class="info3">
                    <div class="starFare">
                      <span class="symbol">￥</span>
                      <span>{{price}}</span>
                      <span class="qi">起</span>
                    </div>
                    <div class="details">
                      <a href=""><span>了解详情</span></a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="insuranse">
                <div class="insuranse_img">
                  <img src="../../assets/homePage/insurance1.jpg" alt="">
                </div>
                <div class="insuranse_info">
                  <div class="info1">
                    <h2>宠物平安医疗险</h2>
                  </div>
                  <div class="info2">
                    <span>覆盖日常疾病以及意外保险</span>
                    <span>0免赔额，窗口直赔</span>
                  </div>
                  <div class="info3">
                    <div class="starFare">
                      <span class="symbol">￥</span>
                      <span>{{price}}</span>
                      <span class="qi">起</span>
                    </div>
                    <div class="details">
                      <a href=""><span>了解详情</span></a>
                    </div>
                  </div>
                </div>

              </div> -->

            </div>
          </div>
  
          <!--合作-->
          <div class="partener plate">
            <div class="partener_word">
              <span>PARTENER</span>
            </div>
            <div class="partener_name">
              <div class="partener_item">
                <span>ALFRED</span>
              </div>
              <div class="partener_item">
                <span>ARTHUR</span>
              </div>
              <div class="partener_item">
                <span>FRANCIS</span>
              </div>
              <div class="partener_item">
                <span>IVAN</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <ButtonState></ButtonState>
  
    </div>
  </template>
  
  <script>
  import TopNav from '../../components/TopNav.vue';
  import ButtonState from '../../components/ButtonState.vue';
  import http from '../../http/request'
  
  
  export default {
    name: 'HomePage',
    components: {
      TopNav,ButtonState
    },
  
      data() {

        return{
          goodslist:[],


          price:'100',
          options1: [{
            value: '选项1',
            label: '宠物'
          }, {
            value: '选项2',
            label: '财产'
          }, {
            value: '选项3',
            label: '旅行'
          }],
          options2:[{
            value:'选项1',
            label:'信用卡'
          },{
            value:'选项2',
            label:'房屋'
          }],
          options3:[{
            value:'选项1',
            label:'普通保险'
          },{
            value:'选项2',
            label:'甄选保险'
          }],
          value1: [],
          value2: [],
          value3: []
        };
        
      },
  
      mounted() {

        http.get("goods/goods/allgoods").then((response) => {
            console.log(response.data);
            this.goodslist=response.data;
        })
          
      },
  
      methods: {
          //跳转页面
        chankxq(item) {            
            this.$router.push({        
                path: '/details',
                query: {
                    id: item.id
                 }
            });
        },
      },
  }
  </script>
  
  <style scoped>
    .container{
      width: 100%;
      margin-bottom: 80px;
    }
    .plate{
      width: 1100px;
      margin: 50px auto;
    }
    a{
      text-decoration: none;
    }
  
    .search{
      margin-top: 50px;
    }
    .fastSearch{
      width: 300px;
      height: 40px;
      border-radius: 10px;
      background-color: #FFB916;
      font-weight: bold;
      line-height: 40px;
      margin: 50px auto;
      margin-bottom: 100px;
    }
    .fastSearch a{
        color: white;
    }

  
    .banner{
      border-top: 1px solid #e3e3e3;
      border-bottom: 1px solid #e3e3e3;
      height: 242px;
    }
    .banner img{
      width: 1100px;
      height: auto;
    }

    .productList{
      border-bottom: 1px solid #e3e3e3;
    }
    .product_word{
      width: 100%;
      font-size: 42px;
      font-weight: bold;
      color: #FFB916;
      margin-bottom: 80px;
    }
    .insuranseList{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 100px;
    }
    .insuranse{
      width: 500px;
      height: 240px;
      display: flex;
      box-sizing: border-box;
      margin-bottom: 50px;
      border-radius: 10px;
      box-shadow:5px 5px 5px #e3e3e3;
    }
    .insuranse_img{
      width: 260px;
      height: 240px;
      overflow: hidden;
      background-position: center center;
      background-repeat: no-repeat;
      border-radius: 10px 0px 0px 10px;
    }
    .insuranse_img img{
      width: 260px;
      height: 240px
    }

    .insuranse_info{
      display: flex;
      flex-direction: column;
      padding-left: 20px;
    }
    .info2{
      display: flex;
      flex-direction: column;
      font-size: 14px;
      color: rgb(147, 147, 147);
      margin-top: 20px;
    }
    .info3{
      display: flex;
      margin-top: 55px;
    }
    .starFare{
      color: #FFB916;
      font-size: 30px;
    }
    .starFare .symbol{
      font-size: 25px;
      font-weight: bold;
    }
    .starFare .qi{
      font-size: 14px;
      margin-left: 3px;
    }
    .details{
      width: 90px;
      height: 30px;
      border-radius: 10px;
      margin-left: 18px;
      margin-top: 3px;
      background-color: #FFB916;
    }
    .details a{
      text-decoration: none;
      color: white;
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      line-height: 30px;
    }

    .partener_word{
      width: 100%;
      font-size: 42px;
      font-weight: bold;
      color: #FFB916;
      margin-bottom: 30px;
    }
    .partener_name{
      display: flex;
      justify-content: space-between;
    }
    .partener_item{
      width: 200px;
      height: 60px;
      background-color: #FFB916;
      border-radius: 60px;
    }
    .partener_item span{
      color: white;
      font-size: 25px;
      line-height: 60px;
      font-weight: bold;
    }
  </style>